<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		ul{
			list-style: none;
		}
		li{
			width: 30px;
			height: 20px;
			float: left;
			font-size: 20px;
			background-color: red;
			color: #fff;
		}
		.box{
			width: 500px;
			height: 500px;
			background-color: #000;
		}
		.box div{
			height: 90px;
			width: 90px;
			font-size: 20px;
			background-color: red;
			color: #fff;
		}
		.clearfix:after{
			height: 0;
			content: '';
			display: block;
			clear: both;
			visibility: hidden;
		}
		.clearfix:after{
			zoom: 1;
		}
		.active{
			color:red;
			background: #fff;
		}
		.hide{
			display: none;
		}
		.show{
			display: block;
		}
	</style>
	<script type="text/javascript" src='jquery-1.7.2.js'></script>
</head>
<body>
<ul class="ul1 clearfix">
	<li class="active">1</li>
	<li>2</li>
	<li>3</li>
</ul>
<div class="box1">
	<div class="hide show">1</div>
	<div class="hide">2</div>
	<div class="hide">3</div>	
</div>

<ul class="ul2 clearfix">
	<li class="active">1</li>
	<li>2</li>
	<li>3</li>
</ul>
<div class="box2">
	<div class="hide show">1</div>
	<div class="hide">2</div>
	<div class="hide">3</div>	
</div>

<script type="text/javascript">
	

	function tab(a,b){
		$(a).children("li").click(function(){
			var index=$(this).index();
			$(a).children("li").eq(index).addClass("active").siblings().removeClass("active")
			$(b).children("div").eq(index).addClass("show").siblings().removeClass("show")
			})
	}
	tab(".ul1",".box1")
	tab(".ul2",".box2")
</script>
</body>
</html>